<template>
    <div class="dutydata-myschooldutydata">
        <Table border stripe :data="data" :columns="columns" :loading="loading"></Table>
        <Modal v-model="status" :title="title" width="400">
            <img :src="imgurl" width="100%">
        </Modal>
    </div>
</template>

<script>
export default {
    props: {
        condition: {
            type: [Boolean, Number],
            default: false
        },
        checkid: {
            type: [Boolean, Number],
            default: false
        }
    },
    data () {
        return {
            status: false,
            title: '',
            imgurl: '',
            data: [],
            columns: [
                {
                    title: '检查项',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        let name= params.row.name.zh?params.row.name.zh:params.row.name.mn;
                        return h('div', name);
                       
                    }
                },
                {
                    title: '检查细则',
                    minWidth: 400,
                    align: 'center',
                    render: (h, params) => {
                        let data = params.row.datas ? params.row.datas : []
                        return h('div', data.map((el, n) => {
                            return h('div', {
                                style: {
                                    height: '45px',
                                    display: 'flex',
                                    borderTop: n == 0 ? '0' : '1px solid #e5e5e5'
                                }
                            }, [
                                h('div', {
                                    style: {
                                        flex: 1,
                                        maxWidth: '150px',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        borderRight: '1px solid #e5e5e5'
                                    }
                                }, el.watchlists_name),
                                h('div', {
                                    style: {
                                        flex: 1,
                                        maxWidth: '150px',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        borderRight: '1px solid #e5e5e5'
                                    }
                                }, el.rule_name),
                                h('div', {
                                    style: {
                                        flex: 1,
                                        width: '180px',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        borderRight: '1px solid #e5e5e5'
                                    }
                                }, el.created_at),
                                h('div', {
                                    style: {
                                        flex: 1,
                                        maxWidth: '80px',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        borderRight: '1px solid #e5e5e5'
                                    }
                                }, [
                                    h('img', {
                                        attrs: {
                                            src: el.img
                                        },
                                        style: {
                                            height: '40px',
                                            maxWidth: '75px',
                                            verticalAlign: 'middle'
                                        },
                                        on: {
                                            click: () => {
                                                if (el.img) {
                                                    this.title = el.rule_name
                                                    this.imgurl = el.img
                                                    this.status = true
                                                }
                                            }
                                        }
                                    })
                                ]),
                                h('div', {
                                    style: {
                                        flex: 1,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }
                                }, el.content)
                            ])
                        }))
                    }
                }
            ],
            loading: true,
            url: 'api/watchlists/v1/securitydata/findByWatchlistsBaseDataId/',
            urls: 'api/watchlists/v1/securitydata/getWatchlistsDataByWatchlistsCheckId',
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 跟新表单
         * @param   {data}            当前数据
         * 
         ************************************************************/
        queryData () {
            this.$http.get(this.url + this.condition).then(val=>{
                this.data = val.data
                this.loading = false
            }).catch(err => {
                this.loading = false
            })
        },
        
        /************************************************************
         * 
         * 跟新表单
         * @param   {data}            当前数据
         * 
         ************************************************************/
        queryDatas () {
            let params = {
                watchlists_base_data_id: this.condition,
                watchlists_check_id: this.checkid
            }
            this.$http.get(this.urls, { params }).then(val=>{
                this.data = val.data
                this.loading = false
            }).catch(err => {
                this.loading = false
            })
        }
    },
    created () {
        if (this.checkid) {
            this.queryDatas ()
        } else {
            this.queryData ()
        }
    },
};
</script>

<style lang="less">
.dutydata-myschooldutydata {
    .ivu-table-cell {
        padding: 0;
    }
}
</style>
